<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="../style/common2.css" />
	<style>
		body{
			background: #e2e2e2;			
		}
		.box input[type=text],.box input[type=password]{
			width: 183px;
			height: 30px;
			box-shadow:0 0 5px #e4e4e4;
			padding-left:45px;
		}
		input[type=password]:hover{
			border-color:#47abff;
		}
		input[type=text]:hover{
			border-color:#47abff;
		}
		input[type=text]{
			background: url(../image/login/userName.jpg) no-repeat 10px center;
		}
		input[type=password]{
			background: url(../image/login/password.jpg) no-repeat 10px center;
		}
		#loginBox{
			width:370px;
			height: 260px;
			background: white;
			position:fixed;
			left:0;
			top:0;
			bottom: 0;
			right:0;
			margin:auto;
			border-bottom: 7px solid #eee;
			border-radius:1px 1px 7px 7px;
		}
		.box{
			margin: 0 auto;
			width:230px;
			height:260px;	
		}
		.box p:nth-of-type(1){
			height:84px;
			background:url(../image/login/logo.jpg) center center no-repeat;
		}
		.box p:nth-of-type(2){
			height:32px;			
		}
		.box p:nth-of-type(3){
			margin-top:12px;
			height:32px;			
		}
		.box p:nth-of-type(4){
			height:42px;			
		}
		.box p:nth-of-type(4) span{
			display: inline-block;
			cursor: pointer;
			line-height: 40px;
		}		
		.forgetPass{
			float:right;
			color: #47abff;
		}
		button{
			width:100%;
			border: none;
			height:32px;
			background: #47abff;
			cursor: pointer;
			font-size: 14px;
			color: white;
			font-family: "微软雅黑";
			outline: none;
		}
	</style>
	<body>
		<div id="loginBox">
			<div class="box">
				<p></p>
				<p><input class="userName" type="text" placeholder="请输入用户名"/></p>
				<p><input class="passWord" type="password" placeholder="请输入密码"/></p>
				<p><input class="checkPass" type="checkbox"/> <span class="remPass">记住密码</span><span class="forgetPass">忘记密码? </span></p>
				<p><button class="submit">登录</button></p>
			</div>
		</div>
		<script type="text/javascript" src="../libs/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../libs/layer-v2.4/layer/layer.js" ></script>
		<script>
			$(".userName").focus();
			//点击记住密码的字则选中复选框
			$(".remPass").click(function(){
				if($(".checkPass").prop("checked")==true){
					$(".checkPass").prop("checked",false);
				}else{
					$(".checkPass").prop("checked",true)
				}
			})
			//输入框的得焦和失焦
			$(".passWord,.userName").focus(function(){
				$(this).css("border-color","#47abff");
			})
			$(".passWord,.userName").blur(function(){
				$(this).css("border-color","#e4e4e4");
			})
			//点击登录
			$(".submit").click(function(){
				login();
			})
			//点击回车登录
			document.onkeydown = function(ev){
				ev = ev||event
				if(ev.keyCode=="13"){
					login()
				}
			}
			//忘记密码
			$(".forgetPass").click(function(){
	   			layer.msg("请联系管理员重置密码！",{time:2000})
	   		})
			//登录
			function login(){
				var hubLoginData = {};
				hubLoginData.username = $('.userName').val();
				hubLoginData.password = $('.passWord').val();				
				if($(".userName").val()==""){
					layer.msg("用户名不能为空！",{icon:2,time:2000})
					return false;
				}
				if($(".passWord").val()==""){
					layer.msg("密码不能为空！",{icon:2,time:2000});
					return false;
				}else{
					getAjax(hubLoginData);
				}
			}
			//记住密码
			function remPass(hubLoginData){
				if($(".checkPass").prop("checked")==true){
					localStorage.hubLoginData = JSON.stringify(hubLoginData);
				}else{
					localStorage.removeItem("hubLoginData");
				}
			}
			//向后端发送登录请求
			function getAjax(hubLoginData) {
				$.ajax({
					type: "post",
					url: "../login?temp="+ Math.random(),
					contentType: 'application/json;charset=utf-8',
					async: false,
					data: JSON.stringify(hubLoginData),
					dataType:"json",
					success: function(data) {
						console.log(data)
						if(data.status == "1001") {
							remPass(hubLoginData);
							window.location = "index.html";
						} else {
							layer.msg("请输入正确的用户名和密码！", {
								icon: 2,
								time: 2000
							})
							return false;
						}

					}
				});
			}
			//获得用户名密码
			getData()
			function getData(){
				if(localStorage.hubLoginData){
					$(".checkPass").attr("checked",true);
					var hubLoginData = JSON.parse(localStorage.hubLoginData);
					$(".userName").val(hubLoginData.username);
					$(".passWord").val(hubLoginData.password);
				}
			}
		</script>
	</body>
</html>
